<template>
  <div class="topicClassroom">
    <div class="allsearch">
      <section class="search-content">
        <el-row :gutter="4" type="flex" justify="start">
          <el-col :span="24">
            <el-select v-model="listQuery.title" style="width:150px;" @change="handleFilter">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="listQuery.keyword"
              style="width:200px"
              placeholder="关键词"
              @keyup.enter.native="handleFilter"
            />
            <el-input
              v-model="listQuery.author"
              style="width:200px"
              placeholder="作者"
              @keyup.enter.native="handleFilter"
            />
            <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button>
            <el-button size="medium" type="info" @click="clearParams">清空</el-button>
          </el-col>
        </el-row>
      </section>
      <eltable
        :table-label="tableLabel"
        :table-data="tableData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
      >
        <el-table-column slot="first" :min-width="10" align="center" type="selection"/>
        <el-table-column slot="second" :min-width="30" label="帖子" prop="post" align="center">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.title }}</el-button>
            <br>
            <el-button type="text"><p v-html="scope.row.content"></p></el-button>
            <br>
            <el-button type="text">{{ scope.row.targetName }}</el-button>
            <br>
          </template>
        </el-table-column>
        <el-table-column slot="isEnd" :min-width="10" label="作者" prop="author" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClickDialog(scope)">{{ scope.row.userName }}</el-button>
            <br>
            <span>{{ scope.row.createTimeStr }}</span>
          </template>
        </el-table-column>
        <el-table-column slot="button" :min-width="15" label="操作" prop="manage" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="deleteTopic(scope)">删除</el-button>
          </template>
        </el-table-column>
      </eltable>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <user-dialog
      :visiabledialog="userdialog"
      :dialog-data="dialogData"
      @changeVisiable="userdialog = false"
    />
  </div>
</template>

<script>
  import UserDialog from '@/components/Dialog'
  import Eltable from '@/components/Eltable'
  import Pagination from '@/components/Pagination' // 分页组件
  import {deleteTopic, getTopicList} from '@/api/subject/topic' // 数据接口
  import {getUserDetail} from '@/api/operate/userDetail' // 数据接口
  import {getTenantId} from '@/utils/auth'

  export default {
    components: {
      Eltable,
      Pagination,
      UserDialog
    },
    data() {
      return {
        userdialog: false,
        dialogData: {},
        listQuery: {
          title: '',
          keyword: '',
          author: ''
        },
        total: 0,
        currentpage: 1,
        pagesize: 10,
        options3: [
          {
            label: '标题',
            value: '标题'
          },
          {
            value: '内容',
            label: '内容'
          }
        ],
        tableLabel: [
          {
            label: '回复/查看', width: '10', prop: 'statistics'
          }
        ],
        tableData: [],
        listFilter: []
      }
    },
    mounted() {
      this.getClassRoomData()
    },
    methods: {
      handleClickDialog(scope) {
        getUserDetail(scope.row.userId).then(response => {
          this.dialogData = response.data.item
        });
        this.userdialog = true
      },
      handleSizeChange(val) {
        this.currentpage = 1;
        this.pagesize = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentpage = val.value;
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleFilter() {
        this.tableData = this.listFilter.filter(item => {
          if (this.listQuery.title === '标题' && item.title.toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false;
          if (this.listQuery.title === '内容' && item.content.toLowerCase().indexOf(this.listQuery.keyword.toLowerCase()) < 0) return false;
          if (this.listQuery.author && item.userName.toLowerCase().indexOf(this.listQuery.author.toLowerCase()) < 0) return false;
          return true
        });
        this.total = this.tableData.length
      },
      clearParams() {
        this.listQuery.title = '';
        this.listQuery.keyword = '';
        this.listQuery.author = '';
        this.getClassRoomData()
      },
      getClassRoomData() {
        getTopicList('classroom', getTenantId()).then(response => {
          response.data.items.map(item => {
            item.statistics = `${item.replyNum}/${item.hitNum}`
          });
          this.tableData = response.data.items;
          this.listFilter = response.data.items;
          this.total = response.data.items.length
        })
      },
      deleteTopic(scope) {
        this.$confirm(`永久删除这个话题吗`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTopic(scope.row.id).then(reponse => {
            if (reponse.code === 200) {
              this.$notify({
                title: '成功',
                message: '话题已被删除！',
                type: 'success',
                duration: 2000
              })
            }
          });
          this.listFilter.splice(scope.$index, 1)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .topicClassroom {
    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }

      .el-table td:nth-child(2) .cell {
        text-align: left;
      }
    }
  }
</style>
